<template>
    <div class="app-container">
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="广告标题：">
                <!-- “trim()”方法被用于删除输入的字符串两端的空格↓ -->
                <el-input v-model.trim="query.title" placeholder="广告标题"></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <!-- “clearable”属性被用于“为该下拉框添加删除（清空）按钮，删除（清空）已选中的选项”；“filterable”属性被用于“为该下拉框添加搜索功能”↓ -->
                <el-select v-model="query.status" style="width:100px" placeholder="选择状态" clearable filterable>
                    <!-- 因为在此处“1”和“0”的数据类型是“数值”而非“字符串”，所以在获取数值时需要在“value”前加冒号进行数据绑定；若数据类型是“字符串”则不必加冒号↓ -->
                    <!-- <el-option label="禁用" :value="0"></el-option> -->
                    <!-- <el-option label="正常" :value="1"></el-option> -->
                    <el-option v-for="item in statusOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
                <el-button icon="el-icon-circle-plus-outline" type="primary" @click="openDialogAndAdd">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" :cell-style="rowStyle" align="center" stripe border style="width: 100%">
            <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
            <el-table-column prop="title" align="center" label="广告标题"></el-table-column>
            <el-table-column prop="imageUrl" align="center" label="广告图片">
                <!-- 注：如果是需要自定义渲染的内容，则需要在被渲染的内容的外层加上“template”标签↓ -->
                <template slot-scope="scope">
                    <!-- 注：因为“preview-src-list”接收的是数组，所以“scope.row.imageUrl”外面的中括号不能少↓ -->
                    <el-image style="width: 90px; height: 60px" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="advertisementUrl" align="center" label="广告链接"></el-table-column>
            <el-table-column prop="status" align="center" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 0" type="danger">禁用</el-tag>
                    <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="sort" align="center" label="排序"></el-table-column>
            <el-table-column align="center" label="操作">
            <!-- “scope”代表当前行的对象，可以通过它来获取当前行的某个属性值↓ -->
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current" :page-sizes="[10, 20, 50]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination>
        <edit :title="edit.title" :dialogVisible="edit.visible" :formData="edit.formData" :remoteClose="remoteClose" :oldImageUrl="edit.oldImageUrl"/>
    </div>
</template>

<script>
import api from '@/api/advertisement'
import Edit from './edit'
const statusOptions = [
    {code:0,name:'禁用'},
    {code:1,name:'正常'}
]
export default {
    name: 'Advertisement', // ←注意：左边这项的值要和路由表中配置的“name”的值保持一致
    components:{Edit},
    data() {
        return {
            list:[], // ←左边这项表示“列表数据”
            page:{ // ←左边这项表示“分页对象”
                current:1, // ←左边这项表示“当前页码”
                size:20, // ←左边这项表示“每页显示的条数”
                total:0 // ←左边这项表示“总记录数”
            },
            query:{}, // ←左边这项表示“查询条件”
            statusOptions, // ←左边这项表示“状态下拉框数组”。这种写法相当于“ES5”中的“statusOptions:statusOptions”
            edit:{ // 注意：←左边这项表示“子组件引用的属性对象”
                title:'',
                visible:false,
                formData:{
                    imageUrl:null // ←注意：如果此处不声明“imageUrl:null”，那么上传图片后图片将无法被回显展示
                },
                oldImageUrl:null // 注意：左边这项表示“编辑时查询出来的原始图片地址”
            },
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        async fetchData(){
            const {data} = await api.getList(this.query,this.page.current,this.page.size) // ←注：左边这项采用了“解构赋值”的形式（具体为返回的“response.data”的值被赋值给了“{data}”中的“data”）
            this.page.total = data.total
            this.list = data.records
        },
        async handleEdit(id){
            // console.log('编辑',id)
            // 通过ID查询详情
            const response = await api.getById(id)
            if (response.code === 20000) {
                // 将查询到的详情数据传递过来
                this.edit.formData = response.data
                this.edit.oldImageUrl = response.data.imageUrl // ←注意：左边这项表示“把编辑时查询出来的原始图片地址保存下来”（此举是为了防止用户上传新图片后没有点击确定按钮把图片同表单内的其它信息绑定，一起保存到数据库，就直接点击了“关闭”或“取消”按钮，导致新的一张图片未被保存，前一张图片又因在上传新的一张图片时已被删除，使得用户再次点击“编辑”按钮打开“编辑”对话框时出现“广告图片”处无法显示（回显）图片的情况）
                // 弹出对话框
                this.edit.visible = true
                this.edit.title = '编辑'
            } else {
                
            }
            
        },
        handleDelete(id){
            console.log('删除',id)
            this.$confirm('确认删除这条记录吗?', '提示', { // 技巧：按组合键“Shift+Tab”会让代码向左缩进
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 发送删除请求
                api.deleteById(id).then(response => {
                    // 处理响应结果
                    this.$message({
                        type: response.code === 20000 ? 'success' : 'error',
                        message: response.message,
                        center:true,
                    });
                })
                // 刷新列表数据
                this.fetchData()
            }).catch(() => {
                // 点击“取消”按钮，取消删除。此处无需做任何逻辑处理（即“不用理会”，因为浏览器会自动关闭消息提示框）          
            });
        },
        // “value”表示“切换之后每页显示的条数”↓
        handleSizeChange(value){
            this.page.size = value
            this.fetchData()
        },
        // 当页码改变后触发此方法，“value”表示“当前点击或输入的（即改变后的）那个页码”↓
        handleCurrentChange(value){
            this.page.current = value
            this.fetchData()
        },
        // 条件查询
        queryData(){
            // 将页码变为“第1页”
            this.page.current = 1
            this.fetchData()
        },
        // 重置
        reload(){
            this.query = {}, // ←左边这一项表示“向‘this.query’传递空对象”
            this.fetchData()
        },
        // 打开“新增”对话框
        openDialogAndAdd(){
            this.edit.visible = true
            this.edit.title = '新增'
        },
        // 关闭对话框
        remoteClose(){
            this.edit.formData = {imageUrl:null} // ←左边这一项表示“向‘this.edit.formData’传递空对象”（但是要保留“imageUrl:null”，原因见上面↑“data()”中“edit.formData.imageUrl”的注释：“如果此处不声明“imageUrl:null”，那么上传图片后图片将无法被回显展示”）
            this.edit.visible = false
            this.fetchData()
        },
        rowStyle(){
            return "text-align:center";
        },
    },
}
</script>
<style lang="scss" scoped>
    div{::v-deep.el-input__inner{text-align: center;}}
    .el-pagination , .el-select-dropdown__item {text-align: center;}
</style>